<template>
	<view class="coupon">
		<custom-navi :show-home="false">到店券管理<view class="putin" @click="record">新增到店卷</view>
		</custom-navi>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索" confirm-type="search"
				 @confirm='seekBtn'></input>
			</view>
		</view>
		<tabs :tabs="tabs" :current='current' @change='tabChange'></tabs>
		<!-- scroll-view -->
		<scroll-view scroll-x="true" @scroll="scroll" scroll-left="0">
			<view class="question">
				<view v-for="(item,index) in btnLinst" :key='index' @click="handlePopBtn(index)" class="btn" :class="{optfor:status==index}">
					{{item.txt}}
				</view>
			</view>
		</scroll-view>
		<view class="" style="position: relative; height: 70%; margin-top: 20rpx;">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
				<view class="bgImg" v-if="fromData.length===0">
					<image src="/static/icon/mescroll-empty.png" mode=""></image>
					<view class="">
						~ 暂无相关数据 ~
					</view>
				</view>
				<view class="coupon-list" v-for="(item,index) in fromData" :key='index'>
					<view class="coupon-list-putaway">
						<text class="Judge">{{item.shelfStateDisplay}}</text><text class="audit" :class="item.shelfState==1? '' : (item.shelfState==2? 'green' : 'red')">{{item.toExamineDisplay}}</text>
					</view>
					<view class="coupon-list-hint" v-if="item.overdueType===1?false : true">
						<view class="img">
							<image src="/static/myicon/warn2.png" mode=""></image>
						</view>
						<view class="">已过期</view>
					</view>
					<view class="coupon-list-title">{{item.volumeName}}(到店券)</view>
					<view class="coupon-list-money">¥ {{item.bookValue}}</view>
					<view class="coupon-list-rests">
						<view class="price">市场售价: ¥ {{item.salesPrice}}</view>
						<view class="time">下架时间: {{item.endTime}}</view>
					</view>
					<view class="coupon-list-quantity">
						<view class="obtain">领取量:<text>{{item.getNum}}</text></view>
						<view class="employ">到店使用量:<text>{{item.userNum}}</text></view>
					</view>
					<view class="coupon-list-operate">
						<view class="" v-if="item.shelfState!=3 && item.shelfState!=1? true : false" @click="putawayBtn(index,item)">下架商品</view>
						<view class="" @click="redactBtn(index,item)">编辑</view>
						<view class="" v-if="item.shelfState!=2? true : false" @click="putawayBtn(index,item)">上架商品</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>
		<!-- <view class="coupon-list" v-for="(item,index) in fromData" :key='index'>
			<view class="coupon-list-putaway">
				<text class="Judge">{{item.shelfStateDisplay}}</text><text class="audit" :class="item.shelfState==1? '' : (item.shelfState==2? 'green' : 'red')">{{item.toExamineDisplay}}</text>
			</view>
			<view class="coupon-list-hint" v-if="item.overdueType===1?false : true">
				<view class="img">
					<image src="/static/myicon/warn2.png" mode=""></image>
				</view>
				<view class="">已过期</view>
			</view>
			<view class="coupon-list-title">{{item.volumeName}}(到店券)</view>
			<view class="coupon-list-money">¥ {{item.bookValue}}</view>
			<view class="coupon-list-rests">
				<view class="price">市场售价: ¥ {{item.salesPrice}}</view>
				<view class="time">下架时间: 2019-09-20</view>
			</view>
			<view class="coupon-list-quantity">
				<view class="obtain">领取量:<text>{{item.getNum}}</text></view>
				<view class="employ">到店使用量:<text>{{item.userNum}}</text></view>
			</view>
			<view class="coupon-list-operate">
				<view class="" v-if="item.shelfState!=2? false : true">下架商品</view>
				<view class="" @click="redactBtn(index,item)">编辑</view>
				<view class="" v-if="item.shelfState==2? false : true">上架商品</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import CONSTS from '@/src/consts';
	import sPullScroll from '../../../components/s-pull-scroll/index.vue';
	import tabs from "../../../components/QS-tabs/QS-tabs.vue";
	import MescrollUni from 'mescroll-uni'
	import {
		findMcCouponList,
		updShelfState
	} from "../../api.js"
	export default {
		components: {
			tabs,
			MescrollUni,
			sPullScroll
		},
		data() {
			return {
				imgData: '',
				current: 0,
				old: {
					scrollTop: 0
				},
				status: '',
				tabs: [{
						name: '全部'
					},
					{
						name: '未上架'
					},
					{
						name: '已上架'
					},

					{
						name: '已下架'
					}
				],
				btnLinst: [{
						txt: '全部'
					},
					{
						txt: '审核中'
					},
					{
						txt: '审核完成'
					},
					{
						txt: '审核不通过'
					},
					{
						txt: '待确认'
					},

				],
				fromData: [],
				// ****
				page: 1,
				size: 10,
				shelfState: 0,
				toExamine: '',
				volumeName: '',
				// ****
				list: [],
				total:'', // 總數
			}
		},
		onLoad() {
			this.refresh()
			const _self = this
			uni.getStorage({
				key: 'shopInfo',
				success: function(res) {
					console.log(res)
				}
			});
			this.listFrom()

		},
		methods: {
			//****************************************************
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					if (pullScroll.page == 1) {
						this.page =1
						this.size=10
						this.listFrom()
					}else{
						if(this.size>this.total){
							pullScroll.empty()
						}else{
							// this.page=this.page+1
							this.size=this.size+10
							// this.listPush()
							this.listFrom()
						}
					}
					// const curList = [];
					// for (let i = this.list.length; i < this.list.length + 20; i++) {
					// 	curList.push(i);
					// }
					// this.list = this.list.concat(curList);
					if (this.fromData.length > 60) {
						// finish(boolean:是否显示finishText,默认显示)
						pullScroll.finish(this.fromData.length > 5);
					} else {
						pullScroll.success();
					}
					// console.log(pullScroll.page)
					// console.log(11114)
					// pullScroll.success();
				}, 1000);
			},
			//**********************************************************
			redactBtn(index, item) {
				console.log(index, item.id)
				uni.navigateTo({
					url: '/src/pages/my/pages/redact/index?id=' + item.id
				});
			},
			
			async putawayBtn(index,item) { // 上下架
			// console.log(item.shelfState)
			if(item.shelfState == 1){
				this.shelfState = 2
			}else if(item.shelfState == 2){
				this.shelfState = 3
			}else if(item.shelfState == 3){
				this.shelfState = 2
			}
				let params = {
					id:item.id,
					shelfState: this.shelfState
				}
				console.log(params)
				try {
					const {
						data
					} = await updShelfState(params)
					this.$utils.common.toast.fail("操作成功");
					// onLoad()
					setTimeout(() => {
					  uni.redirectTo({
					  	url:'/src/pages/my/pages/couponList/index'
					  })
					}, 1000)
					
				} catch (err) {
					console.log(err)
				}
			},
			record() {
				uni.navigateTo({
					url: '/src/pages/coupon/index'
				});
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
				if(e.detail.value == ''){
					this.volumeName = e.detail.value
					this.listFrom()
				}
			},
			seekBtn(e){
				console.log(e.detail.value)
				this.volumeName = e.detail.value
				this.listFrom()
			},
			// importBtn(e){
			// 	console.log(e.detail)
			// 	if(e.etail.value ==''){
			// 		this.listFrom()
			// 	}
			// },
			tabChange(index) {
				this.current = index
				console.log(index)
				this.shelfState = index
				this.listFrom()
			},
			handlePopBtn(index) {
				this.status = index
				this.toExamine = index
				this.listFrom()
				// console.log(index)
			},
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			async listFrom() {
				let params = {
					page: this.page,
					size: this.size,
					shelfState: this.shelfState,
					toExamine: this.toExamine,
					volumeName: this.volumeName,
				}
				try {
					const {
						data
					} = await findMcCouponList(params)

					this.fromData = data.datas
					this.total = data.total
					console.log(this.fromData)
				} catch (err) {
					console.log(err)
				}
			},
			// async listPush() {
			// 	let params = {
			// 		
			// 	}
			// 	try {
			// 		const {
			// 			data
			// 		} = await findMcCouponList(params)
			// 		console.log(data.datas)
			// 		
			// 	} catch (err) {
			// 		console.log(err)
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.bgImg{
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 24rpx;
		color: gray;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.coupon {
		height: 100vh;
		background-color: #FFFFFF;

		.putin {
			// height: 23rpx;
			line-height: 44rpx;
			position: absolute;
			top: 0;
			right: 32rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			opacity: 1;

		}

		&-list {
			margin: 0 auto;
			width: 692rpx;
			// height: 496rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
			opacity: 1;
			border-radius: 10rpx;
			margin-top: 32rpx;

			&-title {
				padding: 16rpx 50rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(39, 39, 39, 1);
				opacity: 1;
			}

			&-operate {
				padding: 20rpx;
				height: 100rpx;

				// display: flex;
				// align-items: center;
				view {
					display: inline-block;
					float: right;
					padding: 10rpx 28rpx;
					background: rgba(255, 255, 255, 1);
					border: 1rpx solid rgba(112, 112, 112, 1);
					opacity: 1;
					border-radius: 26rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(60, 60, 60, 1);
					opacity: 1;
				}
			}

			&-money {
				padding: 0rpx 50rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(254, 102, 50, 1);
				opacity: 1;
			}

			&-quantity {
				width: 692rpx;
				height: 62rpx;
				background: rgba(245, 245, 245, 1);
				padding: 0rpx 50rpx;
				display: flex;
				align-items: center;

				view {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(173, 173, 173, 1);
					opacity: 1;

					text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(60, 60, 60, 1);
						margin-left: 20rpx;
						opacity: 1;
					}
				}

				.obtain {}

				.employ {
					margin-left: auto;
				}
			}

			&-rests {
				padding: 16rpx 50rpx;
				display: flex;
				align-items: center;

				view {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(173, 173, 173, 1);
					opacity: 1;
				}

				.price {}

				.time {
					margin-left: auto;
				}
			}

			&-hint {
				width: 692rpx;
				height: 62rpx;
				background: rgba(221, 250, 250, 1);
				display: flex;
				align-items: center;
				padding: 0 50rpx;
				opacity: 1;

				.img {
					width: 40rpx;
					height: 32rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				view {
					margin-right: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(154, 154, 154, 1);
					opacity: 1;
				}
			}

			&-putaway {
				padding: 32rpx 50rpx;

				.Judge {
					// width:92rpx;
					// height:38rpx;
					text-align: center;
					padding: 5rpx 10rpx;
					background: rgba(234, 234, 234, 1);
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 38rpx;
					color: rgba(123, 123, 123, 1);
					border-radius: 38rpx;
					margin-right: 24rpx;
				}

				.audit {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(221, 221, 221, 1);
					opacity: 1;
				}

				.red {
					color: rgba(209, 11, 11, 1);
				}

				.green {
					color: rgba(12, 212, 211, 1);
				}

			}
		}
	}

	.question {
		width: 900rpx;
		margin: 0 auto;
		margin-top: 22rpx;
		padding-left: 30rpx;
		display: flex;

		.btn {
			margin-right: 20rpx;
			padding: 0 30rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(230, 230, 230, 1);
			opacity: 1;
			border-radius: 28rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			text-align: center;
			line-height: 58rpx;
		}

		.optfor {
			background: rgba(12, 212, 211, 0.08);
			border: 2rpx solid rgba(12, 212, 211, 1);
			opacity: 1;
			border-radius: 28rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(12, 212, 211, 1);
			opacity: 1;
		}
	}
</style>
